ReactNative パフォーマンス備忘録
性能に関するTips
不要な昨日をできるだけ排除する
メモリリークを回避する
ListViewではなく、ScrollList、FlatList、SectionListなどを利用する
アプリケーションのサイズを小さくする
JavascriptによるJSON形式のダウンロードを工夫・最適化する
起動時間を改善する
Javascriptとネイティブ間のブリッジの負荷を小さくする
JavaScriptは1度に1つのスレッドしか利用できないことを押さえておく
画像のダウンロードはキャッシュによって高速化する（Andoridではキャッシュ利用不可）
ReactNativeのビルドにHermesを利用することで「起動時間、メモリ使用量、アプリサイズを小さくする」 cosole.logを本番アプリでは利用しない。性能悪化の原因になり得る。
iOSでは、画像コンポーネントの幅 or 高さの調整が、性能悪化につながる。画像の最適化をオススメする。
onPress中のフレーム内で別アクションを実行する場合、前アクションの結果が戻るまで何もできない。
-> requestAnimationFrameを利用すると良いかも
Expoの場合、画像をビルド時にバンドル化しておくと利用までの性能が上がる
react-native-fast-imageの「FastImage」を標準Imageの代わりに利用する
ScrollViewに大量のデータを置かない。一度にレンダリングしちゃうからめっちゃ重くなる。
インライン関数をpropsに直接与えるのはやめる。そのコンポーネントの再レンダリングが起きちゃう。
code: sample.js
onPress={()=> console.log('making some beverage')}
画像形式に、WEBPを採用する。それがダメならPNGを採用する。JPEGは最終手段。
useMemoを使って、できる限り値の計算をケチる。
と思いきやuseMemoの使いすぎも禁止、普通のレンダリングよりuseMemoを使った方が性能低下する可能性もある。
ReactNativeはNodeJSよりも遅い。
ReactNative x ネイティブ感のブリッジを介さず、直接ネイティブコードとして実装できる方法もあり
ReactNativeは「UIスレッド」「シャドウツリースレッド」「JavaScriptスレッド」の3つのスレッドで実行されてる。
コードをリファクタリングし続けること。そうしないとパフォーマンス低下原因の分析などができない。
アプリサイズの容量圧縮は、アプリの起動時間短縮につながる
生のJSONファイルをそのまま生で利用しない。圧縮する静的オブジェクトIDに変換するなどの対策を。
ReactNativeはマルチスレッドを採用していない。
つまり、同時に別々のコンポーネントをレンダリングすることができない。
最初のレンダリングが完了するまで次のレンダリングが始まらない。
マルチスレッドできない問題を回避するために、独自のネイティブ拡張機能を利用する。
ReactNativeのパフォーマンス評価に役立ちそうなツールを利用する
wy-did-you-renderとかオススメ
コンポーネントに適用するスタイルもインラインで与えない方がいい。再レンダリングを誘発してしまう。
react-native-mapsでカスタムコンポーネントを利用すると重くなる。
1度のアクションで重い処理が発生するのをなるべく防ぐ。javascriptスレッドは1本しかないんです。
参考記事
ReactNative Maps